<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单新增事件</title>
</head>

<body>

    <form action="" method="">

        用户名:
        <input type="text" name="userName" id="userName">
        <br> 电话:
        <input type="tel" name="userTel" id="userTel" placeholder="请输入手机号" required pattern="^(\+86)?1\d{10}$">
        <br>

        <input type="submit" value="提交">
    </form>


    <script type="text/javascript">
        // oninput: 监听输入框输入
        document.getElementById("userName").oninput = function () {
            console.log(this.value)
        }

        // onkeyup: 监听键盘点击操作
        document.getElementById("userName").onkeyup = function () {
            console.log(this.value)
        }

        // oninvalid: 监听验证失败
        document.getElementById("userTel").oninvalid = function () {
            console.log(this.value)
            this.setCustomValidity("请输入正确的手机号")
        }
    </script>


</body>


</html>
